<!--  -->
<template>
  <el-container>
    <div class="page-main-body-box">
      <div class="meedu-main-body">
        <div class="back-bar-box mb-30">
          <div class="btn-back">
            <i class="el-icon-back" @click="$router.go(-1)"> 返回 </i>
          </div>
          <div class="line"></div>
          <div class="name">订单详情</div>
        </div>
        <div class="float-left">
          <div class="panel-box mb-30">
            <el-button type="danger" class="mb-30" v-if="
              Ordersurse.order.status_text === '未支付' ||
              Ordersurse.order.status_text === '支付中'
            " @click="goToPay">改为已支付</el-button>
            <div class="panel-header">订单基础信息</div>
            <div class="panel-body">
              <div class="float-left">
                <div class="d-flex mb-30">
                  <div class="flex-1">UID:{{ Ordersurse.user.id }}</div>
                  <div class="flex-1">学员:{{ Ordersurse.user.nick_name }}</div>
                  <div class="flex-1">订单ID:{{ Ordersurse.order.id }}</div>
                  <div class="flex-1">订单编号:{{ Ordersurse.order.order_id }}</div>
                  <div class="flex-1">总额:￥{{ Ordersurse.order.charge }}</div>
                </div>
                <div class="d-flex">
                  <div class="flex-1">状态:{{ Ordersurse.order.status_text }}</div>
                  <div class="flex-1">支付渠道:{{ Ordersurse.order.payment_text }}</div>
                  <div class="flex-1">
                    时间:{{ new Date(Ordersurse.order.updated_at).toLocaleString() }}
                  </div>
                  <div class="flex-1"></div>
                  <div class="flex-1"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="panel-box mt-30 mb-30">
            <div class="panel-header">订单商品</div>
            <div class="panel-body">
              <el-table :data="Ordersurse.order.goods" style="width: 100%">
                <el-table-column prop="id" label="ID" width="180"></el-table-column>
                <el-table-column prop="goods_id" label="商品ID" width="150"></el-table-column>
                <el-table-column prop="goods_name" label="商品" width="600"></el-table-column>
                <el-table-column prop="goods_charge" label="价格" width="300"></el-table-column>
              </el-table>
            </div>
          </div>
          <div class="panel-box mt-30 mb-30">
            <div class="panel-header">支付记录</div>
            <div class="panel-body">
              <el-table :data="Ordersurse.order.paid_records" style="width: 100%">
                <el-table-column prop="id" label="ID" width="180"></el-table-column>
                <el-table-column prop="paid_type_text" label="支付渠道" width="150"></el-table-column>
                <el-table-column prop="paid_total" label="支付金额" width="600"></el-table-column>
                <el-table-column prop="paid_type_id" label="渠道ID" width="300"></el-table-column>
              </el-table>
            </div>
          </div>
          <div class="panel-box mt-30 mb-30">
            <div class="panel-header">退款记录</div>
            <div class="panel-body">
              <el-table :data="Ordersurse.order.refund" style="width: 100%">
                <el-table-column prop="id" label="ID" width="100"> </el-table-column>
                <el-table-column prop="refund_no" label="订单编号" width="300"> </el-table-column>
                <el-table-column label="支付渠道" width="120">
                  <template slot-scope="scope">
                    <div class="item-img" v-if="Ordersurse.order.refund[scope.$index].payment == 'handPay'">
                      <img src="../../../assets/img/card.png" alt="" />
                    </div>
                    <div v-else>---</div>
                  </template>
                </el-table-column>
                <el-table-column prop="address" label="退款类型" width="120">线下退款
                </el-table-column>
                <el-table-column prop="address1" label="退款金额" width="120">
                  <template slot-scope="scope">
                    ¥ {{ Ordersurse.order.refund[scope.$index].amount / 100 }}
                  </template>
                </el-table-column>
                <el-table-column prop="address2" label="状态">
                  <template slot-scope="scope">
                    <div style="color: #04c877">· 退款成功</div>
                    <div>
                      {{
                          new Date(Ordersurse.order.refund[scope.$index].created_at).toLocaleString()
                      }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="address3" label="提交时间">
                  <template slot-scope="scope">
                    <div>
                      {{
                          new Date(Ordersurse.order.refund[scope.$index].created_at).toLocaleString()
                      }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="open(Ordersurse.order.refund[scope.$index].id)">删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-container>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { lookText, getPay } from "@/network/order";
import { remoRefund } from "@/network/order";
import { MessageBox, Message } from "element-ui";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      Ordersurse: {
        order: {},
        user: {},
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    open(id) {
      MessageBox.confirm("确认操作?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Message({
            type: "success",
            message: "删除成功",
          });
          remoRefund(id);
          this.$nextTick(() => this.lookText());
        })
        .catch(() => {
          Message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    goToPay() {
      MessageBox.confirm("是否改为已支付?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Message({
            type: "success",
            message: "改为已支付成功!",
          });
          this.$nextTick(() => this.getPay());
        })
        .catch(() => { });
    },
    async lookText() {
      const { data } = await lookText(this.$route.query.id);
      this.Ordersurse = data;
    },
    async getPay() {
      const { res } = await getPay(this.$route.query.id);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.lookText();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
};
</script>
<style lang="scss" scoped>
.page-main-body-box {
  flex: 1;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 5px 20px 20px;
  overflow-y: auto;
  background-color: #f1f2f9;

  .meedu-main-body {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 90px;
    box-shadow: 0 2px 4px 0 hsl(0deg 0% 40% / 5%);
    min-width: 1180px;

    .back-bar-box {
      display: flex;
      align-items: center;

      .btn-back {
        font-size: 14px;
        font-weight: 400;
        color: #333;
        cursor: pointer;

        .el-icon-back {
          font-family: element-icons !important;
          font-style: normal;
          font-weight: 400;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          vertical-align: baseline;
          display: inline-block;
          -webkit-font-smoothing: antialiased;
        }
      }

      .line {
        width: 1px;
        height: 14px;
        background-color: #d8d8d8;
        margin-right: 15px;
        margin-left: 15px;
      }

      .name {
        font-size: 14px;
        font-weight: 600;
        color: #333;
      }
    }

    .float-left {
      width: 100%;
      height: auto;
      float: left;

      .panel-box {
        width: 100%;
        height: auto;
        float: left;
        box-sizing: border-box;

        .panel-header {
          padding-left: 15px;
          border-left: 4px solid #409eff;
          font-size: 15px;
          font-weight: 700;
          color: #333;
          margin-bottom: 30px;
        }

        .panel-body {
          width: 100%;
          height: auto;
          float: left;

          .float-left {
            width: 100%;
            height: auto;
            float: left;
          }
        }
      }
    }
  }
}

.mb-30 {
  margin-bottom: 30px;
}

.mt-30 {
  margin-top: 30px;
}

.d-flex {
  display: flex;
  align-items: center;

  .flex-1 {
    flex: 1;
  }
}

::v-deep.el-table thead tr th {
  background-color: #f1f2f9;
  color: black;
}

.item-img img {
  width: 30px;
  height: 30px;
}
</style>
